<meta charset="utf-8">
<title>挂买单统计图</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="网站描述">
<meta name="keywords" content="">
<meta name="author" content="wangl">
<link rel="icon" href="http://ow9lg82yy.bkt.clouddn.com/24f5c360-485d-4a6d-9468-2a61c353cf37.ico">
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all">
<link rel="stylesheet" href="/static/css/user.css" media="all">
<link rel="stylesheet" href="/static/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .Pagination ul{
        list-style: none;
    }
    .Pagination .total_num,.first_page,.prepage,.list_box,.nextpage,.last_page,.total_page,input,.redir {
        float: left;
    }
    .Pagination ul li {
        float: left;
        background-color: #ccc;
        border-radius: 5px;
        text-align: center;
        line-height: 22px;
        width: 22px;
        height: 22px;
        font-size: 12px;
        margin: 0 5px;
        cursor: pointer;
        color: #8b8b8b
    }
    .Pagination ul li:hover {
        background-color: #58acf4;
        color: #fff;
    }

    .Pagination .total_num i {
        font-style: normal;
    }
    .Pagination .list_box {
        width: 320px;
        overflow: hidden;
        position: relative;
        height: 32px;
    }
    .Pagination .list_box ul {
        position: absolute;
        top: 0;
        left: 0;
    }
    .Pagination .prepage {
        background-color: #ccc;
        border-radius: 5px;
        padding: 3px 10px;
        font-size: 12px;
        margin: 0 5px;
        cursor: pointer;
        color: #8b8b8b
    }
    .Pagination .prepage:hover {
        background-color: #58acf4;
        color: #fff;
    }
    .Pagination .nextpage {
        background-color: #ccc;
        border-radius: 5px;
        padding: 3px 10px;
        font-size: 12px;
        margin: 0 5px;
        cursor: pointer;
        color: #8b8b8b
    }
    .Pagination .nextpage:hover {
        background-color: #58acf4;
        color: #fff;
    }
    .Pagination .first_page {
        background-color: #ccc;
        border-radius: 5px;
        padding: 3px 10px;
        font-size: 12px;
        margin: 0 5px;
        cursor: pointer;
        color: #8b8b8b
    }
    .Pagination .first_page:hover {
        background-color: #58acf4;
        color: #fff;
    }
    .Pagination .last_page {
        background-color: #ccc;
        border-radius: 5px;
        padding: 3px 10px;
        font-size: 12px;
        margin: 0 5px;
        cursor: pointer;
        color: #8b8b8b
    }
    .Pagination .last_page:hover {
        background-color: #58acf4;
        color: #fff;
    }

    .Pagination input {
        width: 50px;
        height: 25px;
        border-radius: 5px;
        border: 1px solid #ccc;
        outline: none;
        text-indent: 5px;
        margin: 0 5px;
    }

    .detail-body {
        margin: 20px 0 0;
        min-height: 306px;
        line-height: 26px;
        font-size: 16px;
        color: #333;
        word-wrap: break-word;
    }

    /* blockquote 样式 */
    blockquote {
        display: block;
        border-left: 8px solid #d0e5f2;
        padding: 5px 10px;
        margin: 10px 0;
        line-height: 1.4;
        font-size: 100%;
        background-color: #f1f1f1;
    }

    /***
    *  ztree 图标变成黄色
    */
    .ztree .line {
        line-height: 0;
        border-top: none;
        float: none;
    }

    .ztree li span.button.ico_docu {
        background-position: -110px 0;
        margin-right: 2px;
        vertical-align: top;
    }

    /* code 样式 */
    code {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 3px 5px;
        margin: 0 3px;
    }

    pre code {
        display: block;
    }

</style>
<style>

    .laytable-cell-1-content {
        width: 400px;
    }

    .laytable-cell-1-shareholderName {
        width: 200px;
    }

</style>
</head>
<body >

<div id="main" style="width: 100%;height: 400px;">

</body>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/tools.js"></script>
<script type="text/javascript" src="/static/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/static/js/CodeConst.js"></script>
<!-- <#--<script type="text/javascript" src="/static/js/jquery-1.10.2.js"></script>--> -->
<script type="text/javascript" src="/static/js/common.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var xData = [], yData = [];
    $.ajax({
        url: '/back/order/hangBuy/list',
        type: 'GET',
        dataType: 'json',
        data: {},
        success:function(res){
            console.log(res)
            for(var i=0,len=res.data.list.length;i<len;i++){
                xData.push(res.data.list[i].singlePrice);
                yData.push(res.data.list[i].aliveCoinCount);
            }
        },
        complete:function(){
            option = {
                xAxis: {
                    name: '单价',
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    name: '数量',
                    type: 'value'
                },
                tooltip : {
                    trigger: 'axis'
                },
                series: [{
                    name:'挂买数量:',
                    data: yData,
                    type: 'bar',
                    barWidth : 30
                }]
            };
            myChart.setOption(option);
        }
    });




</script>

